iT邦幫忙

2023 iThome 鐵人賽

DAY 26
0
Modern Web

三十天持續努力挑戰py系列 第 26

Day_26 滾動監控 讀取圖示 浮動標籤 With bootstrap

  • 分享至 

  • xImage
  •  
  • 大家好,又來做一期我自認為蠻常用的Bootstrap重點整理及介紹。這次要介紹的是滾動監控、讀取圖示、工具提示框、浮動標籤等等,還請大家多多關照。
  • 滾動監控 (Scrollspy):根據滾動位置自動更新 Bootstrap 導覽或列表元件,以指示當前處於啟用狀態的連結。
    https://ithelp.ithome.com.tw/upload/images/20230927/20162170BKy0PJ6T6D.png
  • 其顯示方式還有另外幾個這邊就不多作介紹,這主要功能是要用JS與此作連動,以下。
  • 透過 data 屬性:要在您的導覽列中加上滾動監控行為,只要將 data-bs-spy="scroll" 加到您要監控的元素 (通常是 <body>)。 接著將 data-bs-target 屬性加入任何Bootstrap .nav 元件的父元素 ID 或 class。
  • 透過 JavaScript:在您的 CSS 加入 position: relative; 後,透過 JavaScript 調用滾動監控:
<style>
    body {
        position: relative;
    }
</style>

<body data-bs-spy="scroll" data-bs-target="#navbar-example">
    Lorem, <br>ipsum<br> dolor<br> sit<br> amet<br> consectetur<br> adipisicing <br>elit.<br> Iste!
    <div id="navbar-example">
        <ul class="nav nav-tabs" role="tablist">
            Lorem, <br>ipsum<br> dolor<br> sit<br> amet<br> consectetur<br> adipisicing <br>elit.<br> Iste!
        </ul>
    </div>
    Lorem, <br>ipsum<br> dolor<br> sit<br> amet<br> consectetur<br> adipisicing <br>elit.<br> Iste!
    <script>
        var scrollSpy = new bootstrap.ScrollSpy(document.body, {
            target: '#navbar-example'
        })
    </script>
</body>
  • 以上淺介紹了滾動監控的基礎,想詳細了解請至https://bootstrap5.hexschool.com/docs/5.1/components/scrollspy/#item-2

  • 接下來介紹幾個我個人在刻網站時,遇到LODING的時候,很常用的幾個ICON。

  • Border 讀取圖示:使用 border 讀取圖示來當作輕量的載入狀態顯示。
    https://ithelp.ithome.com.tw/upload/images/20230927/20162170ePr0LGpe6O.png

<div class="spinner-border" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
  • text-(warning/danger...)可以更改顏色。
  • 漸變讀取圖示:如果你不喜歡 border 讀取圖示,可以切換到漸變讀取圖示。雖然技術上來說,它不會旋轉,但它會反覆漸變顯示!
    https://ithelp.ithome.com.tw/upload/images/20230927/201621703hNu4zt24v.png
<div class="spinner-grow" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
  • 尺寸:增加 .spinner-border-sm 和 .spinner-grow-sm 製作一個較小的讀取圖示,讓它可以在其他元件中快速地被使用。
  • 對其:可以使用margin,以及Flex裡面的align、float等等調整位置。
  • 也可以新增至按鈕裡面。
    https://ithelp.ithome.com.tw/upload/images/20230927/20162170dLJXONmDPB.png
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  <span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>
  • 接下來介紹一個輸入資料時蠻常用的功能之一,浮動標籤 (Floating labels)。他會把你的像是的東西placeholer縮小至同一個input框,裡面的一個地方。
    https://ithelp.ithome.com.tw/upload/images/20230927/20162170D3D9ilU3FK.png
    https://ithelp.ithome.com.tw/upload/images/20230927/20162170zDHBjuoh3x.png
<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
  <label for="floatingInput">Email address</label>
</div>
<div class="form-floating">
  <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
  <label for="floatingPassword">Password</label>
</div>
  • 如果已經定義 value ,則 <label> 會自動調整為其浮動位置。表單驗證樣式也可以按預期運作。
  • select也可以使用的:
    https://ithelp.ithome.com.tw/upload/images/20230927/20162170VpdlROfPlo.png
    <div class="form-floating">
        <select class="form-select" id="floatingSelect" aria-label="Floating label select example">
            <option selected>Open this select menu</option>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
        </select>
        <label for="floatingSelect">Works with selects</label>
    </div>

上一篇
Day_25 RDBMS 關聯式資料庫 基本使用教學
下一篇
Day_27 JSON-SERVER 模擬後端伺服器資料
系列文
三十天持續努力挑戰py30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言